<template>
    <div>
        <div class="sy-tit">订单全寿命周期实时利率分布</div>
        <div id="myChart" style="width:1000;height:300px; margin:0 auto;margin-bottom:-60px"></div>
    </div>
</template>

<script>
export default {
    mounted() {
        this.InitChart()
    },
    methods: {
        InitChart() {
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 指定图表的配置项和数据
            var option = {
                color: ['#7bbfea', '#00796a', '#e1251b'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999',
                        },
                    },
                    formatter: function (params) {
                        console.log(params)
                        var relVal = params[0].name
                        for (var i = 0, l = params.length; i < l; i++) {
                            if (params[i].seriesName === '单个供应商') {
                                relVal += '<br/>' + params[i].seriesName + '(个)' + ' : ' + params[i].value
                            }
                            if (params[i].seriesName === '单笔订单') {
                                relVal += '<br/>' + params[i].seriesName + '(个)' + ' : ' + params[i].value
                            }
                            if (params[i].seriesName === '实时平均价') {
                                relVal += '<br/>' + params[i].seriesName + '(万)' + ' : ' + params[i].value
                            }
                        }
                        return relVal
                    },
                },
                toolbox: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                legend: {
                    data: ['单个供应商', '单笔订单', '实时平均价'],
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['招投标', '合同签订', '采购定单', '物资生产', '物资配送', '工程投运验收', '工程质保'],
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    {
                        type: 'category',
                        data: x1_data,
                        max: 1000,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '占权比重',
                        min: 0,
                        max: 15,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} %',
                        },
                    },
                ],
                grid: {
                    right: 5,
                    left: 5,
                    top: 50,
                    containLabel: true,
                },
                series: [
                    {
                        name: '单个供应商',
                        type: 'scatter',
                        symbolSize: 10,
                        data: [
                            [1, 8.04],
                            [9.8, 7.04],
                            [8.07, 6.95],
                            [1.0, 7.58],
                            [5.05, 8.81],
                            [11.0, 8.33],
                            [14.0, 7.66],
                            [1.4, 6.81],
                            [1.6, 6.33],
                            [1.2, 8.96],
                            [1.5, 6.82],
                            [1.15, 7.2],
                            [1.5, 7.2],
                            [3.03, 4.23],
                            [2.2, 7.83],
                            [2.02, 4.47],
                            [1.05, 3.33],
                            [4.05, 4.96],
                            [6.03, 7.24],
                            [2.0, 6.26],
                            [2.0, 8.84],
                            [3.08, 5.82],
                            [3.02, 5.68],
                            [0.441815, 3.75675],
                            [0.116598, 3.133555],
                            [0.359274, 3.567919],
                            [0.814811, 4.363382],
                            [0.387125, 3.560165],
                            [0.982243, 4.564305],
                            [0.067732, 3.176513],
                            [0.42781, 3.816464],
                            [0.995731, 4.550095],
                            [0.738336, 4.256571],
                            [0.981083, 4.560815],
                            [0.526171, 3.929515],
                            [0.378887, 3.52617],
                            [0.033859, 3.156393],
                            [1.132791, 3.110301],
                            [1.138306, 3.149813],
                            [1.247809, 3.476346],
                            [1.64827, 4.119688],
                            [2.731209, 4.282233],
                            [2.236833, 3.486582],
                            [2.969788, 4.655492],
                            [2.607492, 3.965162],
                            [0.358622, 3.5149],
                            [0.147846, 3.125947],
                            [0.63782, 4.094115],
                            [0.230372, 3.476039],
                            [0.070237, 3.21061],
                            [0.067154, 3.190612],
                            [0.925577, 4.631504],
                            [0.717733, 4.29589],
                            [0.015371, 3.085028],
                            [0.33507, 3.44808],
                            [0.040486, 3.16744],
                            [0.212575, 3.364266],
                            [0.617218, 3.993482],
                            [0.541196, 3.891471],
                            [0.045353, 3.143259],
                            [0.126762, 3.114204],
                            [0.556486, 3.851484],
                            [0.901144, 4.621899],
                            [0.958476, 4.580768],
                            [0.274561, 3.620992],
                            [0.394396, 3.580501],
                            [0.87248, 4.618706],
                            [0.409932, 3.676867],
                            [0.908969, 4.641845],
                            [0.166819, 3.175939],
                            [0.665016, 4.26498],
                            [0.263727, 3.558448],
                            [0.231214, 3.436632],
                            [0.552928, 3.831052],
                            [0.047744, 3.182853],
                            [0.365746, 3.498906],
                            [0.495002, 3.946833],
                            [0.493466, 3.900583],
                            [0.792101, 4.238522],
                            [0.76966, 4.23308],
                            [0.251821, 3.521557],
                            [0.181951, 3.203344],
                            [0.808177, 4.278105],
                            [0.334116, 3.555705],
                            [0.33863, 3.502661],
                            [0.452584, 3.859776],
                            [0.69477, 4.275956],
                            [0.590902, 3.916191],
                        ],
                    },
                    {
                        name: '单笔订单',
                        type: 'scatter',
                        data: [1, 2.3, 2.3, 2.5, 2, 5.9, 9.0, 5.4, 3.7, 5.7, 2, 3, 4],
                    },
                    {
                        name: '实时平均价',
                        type: 'line',
                        data: [0, 6.3, 1.3, 2.3, 1.2, 6.8, 5.3, 2, 3, 6.0, 3.3, 3.5, 0.2, 0.4],
                    },
                ],
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            myChart.on('click', function (e) {
                console.log('444', e)
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.sy-tit {
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #666666;
    margin-top: 20px;
}
</style>